<template>
  <div
    v-if="isMaskShow"
    class="browser-mask"
    :class="{ 'mask-bg': isMaskShowImg ?? '' }"
    @click="showMaskImg"
  >
    <img v-if="isMaskShowImg" src="./assets/mask.png" alt="请在浏览器中打开" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, onBeforeUnmount, watch, onMounted } from "vue";
import { isInApp, isWeChatBrowser } from "@ret-utils/bridge";

const isMaskShow = isWeChatBrowser();
const isMaskShowImg = ref(false);

const showMaskImg = () => {
  isMaskShowImg.value = !isMaskShowImg.value;
};
</script>
<style lang="less" scoped src="./assets/browser-mask.less"></style>
